<template>
  <div>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">视频分类</div>
      </el-col>
      <el-col :span="21">
        <el-select v-model="field.fieldValue.type" class="full-width">
          <el-option v-for="item in videoType" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="image-label">视频标题</div>
      </el-col>
      <el-col :span="21">
        <KindEditor :content.sync="field.fieldValue.title" editor-type="Input" width="100%"/>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <div v-for="(path, index) in field.fieldValue.paths" :key="index"
           class="line video-block right-space"
           @mouseover="showCover(index)">
<!--        <img alt="视频封面" src="/ymer/action/file/showImage?filename=video/video-picture.jpg"-->
<!--             style="width: 100%; height: 100%; border-radius: 4px;"/>-->
<!--        <div :style="coverStyle[index]"-->
<!--             class="video-cover"-->
<!--             @mouseleave="hideCover(index)">-->
          <div class="el-icon-delete video-icon-delete"
               @click="handleDelete(index)"></div>
<!--          <div class="el-icon-video-play video-icon-play"-->
<!--               @click="handlePlay(index)"></div>-->
          <video controls style="width: 80%; height: 80%; border-radius: 4px;" :src="path" preload/>
<!--        </div>-->
      </div>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="24">
        <el-upload
          :on-error="handleUploadError" accept=".mp4"
          :on-success="handleUploadSuccess"
          :show-file-list=false
          :action="'/pmph/action/video/upload?uploadPath=' + uploadPath"
          multiple>
          <el-button size="small" style="width: 180px;" type="primary">上传视频</el-button>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'KVideoField',
  props: {
    field: {},
    fieldIndex: '',
    uploadPath: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      coverStyle: [],
      videoType: []
    }
  },
  methods: {
    showCover(index) {
      this.coverStyle.splice(index, 1, 'display: block;')
    },
    hideCover(index) {
      this.coverStyle.splice(index, 1, 'display: none;')
    },
    handleDelete(index) {
      this.$emit('del', this.fieldIndex, index)
    },
    handlePlay(index) {
      this.$emit('play', this.fieldIndex, index)
    },
    handleUploadError(err, file, fileList) {
      this.$message.error("视频上传失败")
    },
    handleUploadSuccess(response) {
      this.$emit("upload", this.fieldIndex, response.path)
    }
  },
  created() {
    for (let str in this.field.fieldValue.paths) {
      this.coverStyle.push('display: none;')
    }
    // 加载视频类型数据 todo;
  }
}
</script>
<style scoped>
.line {
  display: inline-block;
}

.image-label {
  height: 40px;
  line-height: 40px;
  text-align: right;
  margin-right: 10px;
}

.full-width {
  width: 100%;
}

.bottom-space {
  margin-bottom: 10px;
}

.right-space {
  margin-right: 10px;
}

.video-block {
  width: 300px;
  height: 200px;
  border-radius: 4px;
  position: relative;
}

.video-cover {
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  width: 120px;
  height: 64px;
  position: absolute;
  top: 0;
  left: 0;
}

.video-icon-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  cursor: pointer;
}

.video-icon-play {
  position: absolute;
  top: 16px;
  right: 44px;
  color: white;
  cursor: pointer;
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.img-preview-block img {
  max-width: 600px;
  max-height: 600px;
}

</style>
